// 实现修改文章

let form = layui.form
let id = location.search.split('?id=')[1]
// console.log(id); // 获取到id的值

// ================== 关于id的处理 ==================
// 通过 location.search 可以获取到地址中的查询字符串的结果
// console.log(location.search);

// ================  封面的裁切效果 ================
// 1. 获取裁剪区域的 DOM 元素
let $image = $('.container img')

// 2. 裁剪选项
let options = {
    aspectRatio: 400 / 280,
    preview: '.preview',
}

// ================ 获取文章类别的下拉框数据 ================
axios.get('/my/article/cates').then((res) => {
    // console.log(res);

    let newArr = res.data.data.map((item) => {
        return `<option value="${item.Id}">${item.name}</option>`
    })

    $('[name=cate_id]').append(newArr.join(''))
    // 手动渲染更新
    form.render()

    // ================== 发送ajax请求，获取对应文章详情 =====================
    // 这个请求需要带上文章的id
    axios.get('/my/article/' + id).then((res) => {
        console.log(res)

        // 响应的数据填充到页面表单中
        // 给表单赋值
        form.val('form', res.data.data)

        // 给富文本编辑器设置内容
        editor.txt.html(res.data.data.content)

        // 3. 初始化裁剪区域
        // 图片的根路径： http://api-breakingnews-web.itheima.net
        // 在做初始化裁剪区域的时候，需要将图片更换下
        // 注意：服务器响应回来的封面图片数据在 cover_img中，但是图片地址是不完整的，所以需要手动拼上完整的根路径的。
        let imgSrc =
            'http://big-event-api-t.itheima.net' + res.data.data.cover_img
        $image.attr('src', imgSrc).cropper(options)
    })
})

// ================   初始化富文本编辑器  ================
const E = window.wangEditor
const editor = new E('#contentBox')
// 层级调整下（防止挡住下拉框的内容）
editor.config.zIndex = 1
editor.create()

// ================ 点击 ·选择封面· 弹出框，用户选择文件 ================
$('#btnChooseCoverImage').on('click', function () {
    $('#fileCover').click()
})

// =============== 给文件域注册change事件, 更换裁切区域的图片 ======================
$('#fileCover').on('change', function () {
    // 获取用户选择的文件
    let file = this.files[0]
    // console.log(file);

    if (!file) {
        return layer.msg('请选择图片')
    }

    // 将文件对象转成地址
    let imgSrc = URL.createObjectURL(file)
    // console.log(imgSrc);

    // 先销毁裁切区域， 在设置图片的src，在重新渲染
    $image.cropper('destroy').attr('src', imgSrc).cropper(options)
})

// =============== 决定文章的状态是已发布，还是草稿 ===============
let state // 变量state 来存储文章的状态（已发布、草稿）
$('#btnPublish').on('click', function () {
    state = '已发布'
})

$('#btnSave').on('click', function () {
    state = '草稿'
})

// =============== 获取表单数据，ajax提交数据 ===============
$('#form').on('submit', function (e) {
    e.preventDefault()

    // 收集数据 ==> 接口要求的是 FormData格式数据
    let fd = new FormData(this)

    // 对于FormData收集不到的数据， 可以使用append方法进行追加
    // 语法： fd.append(name, value);

    // 收集到了富文本编辑器内容
    //  editor.txt.html() ==> 可以获取到富文本编辑器的内容（带标签）
    // console.log(editor.txt.html());
    fd.append('content', editor.txt.html())

    // 收集到了文章的状态
    // console.log("文章的状态 ", state);
    fd.append('state', state)

    // 收集文章id
    fd.append('Id', id)

    // 收集封面数据
    $image
        .cropper('getCroppedCanvas', {
            // 创建一个 Canvas 画布
            width: 400,
            height: 280,
        })
        .toBlob(function (blob) {
            // console.log("收集到了", blob);
            // 将 Canvas 画布上的内容，转化为文件对象
            // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据

            // 使用fd的append方法来追加blob数据
            fd.append('cover_img', blob)

            // 检测
            // fd.forEach((value, name) => console.log(value, name));

            // 在这发送ajax请求 ==> 才把数据完整的收集到了
            axios.post('/my/article/edit', fd).then((res) => {
                console.log(res)

                if (res.data.status !== 0) {
                    return layer.msg('更新文章失败')
                }

                /* // 成功
        layer.msg("发布成功");
        // 跳转回到 art_list.html 文章列表页面
        location.href = "../article/art_list.html"; */

                layer.msg(
                    '更新文章成功',
                    {
                        time: 1500, //2秒关闭（如果不配置，默认是3秒）
                    },
                    function () {
                        // 关闭后想做些什么
                        // 跳转页面
                        location.href = '../article/art_list.html'
                    }
                )
            })
        })
})
